<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Control Initialization</title>
	<style>
	.respokaneSearchBox{border:2px solid #CC0202; position:absolute; z-index:2000000}
	</style>
    <script src="//maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="spokanelib.js"></script>
    <script type="text/javascript">
    //<![CDATA[
	var GOOGLEMAPO;
	var PolyOutline; 
	var BoxLineColor = "#CC0202";
	var BoxLineWidth = 2;
	var BoxLineTrans = .65;
    function initialize() {
      	if (GBrowserIsCompatible()) {
	        GOOGLEMAPO = new GMap2(document.getElementById("respokaneGoogleMap"));
	        //get the bounds and zoom in
	        var lat1 = 47.85187391101592;
			var long1 = -117.1142578125;
			var lat2 = 47.481016589036074;
			var long2 = -117.66357421875;
			var rsBounds = new GLatLngBounds(new GLatLng(lat2, long2), new GLatLng(lat1, long1));	
			//build map and center
			_respokaneMapInitCenter = rsBounds.getCenter();
			_respokaneMapInitZoom = GOOGLEMAPO.getBoundsZoomLevel(rsBounds);
			GOOGLEMAPO.setCenter(rsBounds.getCenter(), GOOGLEMAPO.getBoundsZoomLevel(rsBounds));
	        //add controls
			GOOGLEMAPO.addControl(new GLargeMapControl());
			GOOGLEMAPO.addControl(new GScaleControl());
			
			GOOGLEMAPO.enableDoubleClickZoom();
			GOOGLEMAPO.enableDragging();
			
			ChangeToolState(RESPOKANETOOLZOOMBOX);
			//ResetTools(true, true);
			
			
			//bind event for mouse and key down/up
			
			/*GEvent.bind(GOOGLEMAPO, "drag", function(latlng) {
				document.getElementById("message").value += "drag:"+"," + latlng+ "\n";
			});
			GEvent.addListener(GOOGLEMAPO, "dragstart", function(mEvent) {
				document.getElementById("message").value += "dragstart:"+"," +mEvent+ "\n";
			});
			*/
			// Display a rectangle in the center of the map at about a quarter of
			// the size of the main map
			var bounds = GOOGLEMAPO.getBounds();
			var southWest = bounds.getSouthWest();
			var northEast = bounds.getNorthEast();
			var lngDelta = (northEast.lng() - southWest.lng()) / 4;
			var latDelta = (northEast.lat() - southWest.lat()) / 4;
			var PlyPoints = new Array(
								    new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
								    new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
								    
			//now we draw the box
			PolyOutline = new GPolyline(BoxCorners(PlyPoints), this.BoxLineColor, this.BoxLineWidth, this.BoxLineTrans);
			GOOGLEMAPO.addOverlay(PolyOutline);
			//GOOGLEMAPO.addOverlay(new Rectangle(rectBounds));
			
			
			//add listener for our mouse down to the overlay
			//GEvent.addDomListener(RESPOKANEMapOverlay, 'mousedown', MouseDownH);
			//GEvent.addDomListener(RESPOKANEMapOverlay, 'mousemove', MouseMoveH); 
			/*
			//add handler for zoom
			GEvent.addListener(GOOGLEMAPO, "zoomend", function()
			{
				glZoomChanged();
			});
			
			//add move end handler
			GEvent.addListener(GOOGLEMAPO, "moveend", glCenterChanged);
			
			//fire params listners
			this.LFireAllListners();
			*/
		}
    }
    function CenterMap()
	{
		if( arguments.length == 2 )
		{
			GOOGLEMAPO.setCenter(arguments[0], arguments[1]); 
		}
		else
		{
			document.getElementById("message").value += '\n center=lat:' + arguments[0].getCenter().lat() +",lng:" + arguments[0].getCenter().lng() + "  boundszoomlevel:" +  GOOGLEMAPO.getBoundsZoomLevel(arguments[0]);
			GOOGLEMAPO.setCenter(arguments[0].getCenter(), GOOGLEMAPO.getBoundsZoomLevel(arguments[0])); 			
		}
	}
    function dragMode(){
    	GOOGLEMAPO.disableDragging();
    	MAP_WRAP.addEventListener('mousedown', MouseDownH, true);
    	 
    	MAP_WRAP.addEventListener('mouseup', MouseUpH, true);
    	
    	//document.getElementById("testDragDiv").ondrag = testDrag;
    }
   
    function MouseUpH(e){
    	MAP_WRAP.removeEventListener('mousemove', MouseMoveH, true);
    	document.getElementById('message').value += 'mouseup\n';
    	ZoomBox.style.width = 0;
		ZoomBox.style.height = 0;
		
		
		
		///////////////////////////
		//set the zoom map bounds to find the center - put this in the zoom box class
				document.getElementById('message').value += "\n N:" +newTop + ",E:"+ (newLeft+newWidth) + ",S:" + (newTop+newHeight)+",W:" + newLeft;
				//var neCrn = new GLatLng(newTop, newLeft+newWidth);
				//var swCrn = new GLatLng(newTop+newHeight, newLeft);
				
				var neCrn = GOOGLEMAPO.fromContainerPixelToLatLng(new GPoint(newLeft+newWidth,newTop));
				var swCrn = GOOGLEMAPO.fromContainerPixelToLatLng(new GPoint(newLeft,newTop+newHeight));
				var lat1 = 47.85187391101592;
			var long1 = -117.1142578125;
			var lat2 = 47.481016589036074;
			var long2 = -117.66357421875;
				document.getElementById('message').value += "\n " +neCrn + ","+ swCrn + " "+ neCrn.latRadians()+":"+neCrn.lngRadians()+":"+swCrn.latRadians()+":"+swCrn.lngRadians();
				var rsBounds = new GLatLngBounds(swCrn, neCrn);
				document.getElementById('message').value += "\n rsBounds: "+ rsBounds + " ";
				
				
				
			
				CenterMap(rsBounds);
				
				//now we draw the box
				//update our poly points
				var tempPoints = new Array();
				tempPoints[0] = neCrn;
				tempPoints[1] = swCrn;
				//PlyPoints = tempPoints;
				PolyOutline = new GPolyline(BoxCorners(tempPoints), BoxLineColor, BoxLineWidth, BoxLineTrans);
				GOOGLEMAPO.addOverlay(PolyOutline);
    	
    }
    function MouseDownH(e)
	{
		MAP_WRAP.addEventListener('mousemove', MouseMoveH, true);
		document.getElementById("message").value += "mouse down\n";
		//document.onmousemove = MouseMoveH;
		
		if (!e) 
			e = window.event;
		//get mouse location
		if (e.pageX || e.pageY) 	
		{
			MOUSELOCATION_X = e.pageX;
			MOUSELOCATION_Y = e.pageY;
		}
		else if (e.clientX || e.clientY) 	
		{
			MOUSELOCATION_X = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			MOUSELOCATION_Y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		//document.getElementById("message").value = "mouse down: " + MOUSELOCATION_X + "," + MOUSELOCATION_Y + "\n";
		//set zoom box position
		var RESPOKANEMPixelOffset = respokaneGloGetObjectOffset(GOOGMAP_ELEM);
		ZoomBox.style.left = (MOUSELOCATION_X -  RESPOKANEMPixelOffset.x) + "px";
		ZoomBox.style.top = (MOUSELOCATION_Y  -  RESPOKANEMPixelOffset.y) + "px";
		ZoomBox.style.width = 0;
		ZoomBox.style.height = 0;
		originX = MOUSELOCATION_X;
		originY = MOUSELOCATION_Y;
		originLeft = MOUSELOCATION_X -  RESPOKANEMPixelOffset.x;
		originTop = MOUSELOCATION_Y  -  RESPOKANEMPixelOffset.y;
		newLeft=originLeft;
		newTop = originTop;
		//set cursor to crosshair
		ZoomBox.style.cursor = "crosshair";
		GOOGMAP_ELEM.style.cursor = "crosshair";
		
	}
	var originX=0;
	var originY=0;
	var originLeft = 0;
	var originTop = 0;
	var newLeft=0;
	var newTop = 0;
	var newWidth=0;
	var newHeight=0;
    function MouseMoveH(e)
	{
		//document.getElementById("message").value += 'x';
		
		//capture current mouse event
		if (!e) 
			e = window.event;
		
		//get mouse location
		if (e.pageX || e.pageY) 	
		{
			MOUSELOCATION_X = e.pageX;
			MOUSELOCATION_Y = e.pageY;
		}
		else if (e.clientX || e.clientY) 	
		{
			MOUSELOCATION_X = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			MOUSELOCATION_Y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
		var RESPOKANEMPixelOffset = respokaneGloGetObjectOffset(GOOGMAP_ELEM);
		newWidth = Math.abs(MOUSELOCATION_X - originX);
		newHeight = Math.abs(MOUSELOCATION_Y - originY);
		ZoomBox.style.width =  newWidth + "px";
		ZoomBox.style.height = newHeight + "px";
		
			
	
		if(MOUSELOCATION_X < originX){
			newLeft = originLeft - newWidth;
			ZoomBox.style.left =  newLeft + "px";
		}
		if(MOUSELOCATION_Y < originY){	
			newTop = originTop - newHeight;
			ZoomBox.style.top =  newTop + "px";
		}
		document.getElementById('message').value += "\n N:" +newTop + ",E:"+ (newLeft+newWidth) + ",S:" + (newTop+newHeight)+",W:" + newLeft;
		//document.getElementById("message").value += (MOUSELOCATION_X - originX) + "," + (MOUSELOCATION_Y - originY)+ "  " + newLeft+","+newTop + "      ";
		
	}
    function removeOverlay(){
    	GOOGLEMAPO.removeOverlay(PolyOutline);
    }
    function BoxCorners(points)
	{
		var boxPoints = new Array();
		//pass box on corners above
		boxPoints[0] = new GLatLng(points[0].y, points[1].x);
		boxPoints[1] = points[0];
		boxPoints[2] = new GLatLng(points[1].y, points[0].x);
		boxPoints[3] = points[1];
		boxPoints[4] = new GLatLng(points[0].y, points[1].x);
		return boxPoints;
	}
    var RESPOKANEZOOMTOOL_ELEM = "respokaneMapToolBox";
	var RESPOKANEDEFAULTTOOL_ELEM = "respokaneMapToolDrag";
    var RESPOKANETOOLDEFAULT = 0;
    var RESPOKANETOOLZOOMBOX = 1;
	var RESPOKANECURRTOOL = RESPOKANETOOLDEFAULT;
	var RESPOKANEBGON = 1;
	var RESPOKANEBGOFF = 2;
	var RESPOKANEBGNA = 3;
	
	var _respokaneMapInitCenter;
	var _respokaneMapInitZoom;
    
	function zToolChangeHandler(selTool)
	{
		ChangeToolState(selTool);
		ResetTools(true, true);
	}

    function ChangeToolState(selTool)
	{
		if( selTool != RESPOKANECURRTOOL)
		{
			RESPOKANECURRTOOL = selTool;
			var tmpState = "";
			for(var i=0;i<RESPOKANETOOLCLASSES.length;i++)
			{
				if( i == RESPOKANECURRTOOL)
				{
					RESPOKANETOOLCLASSES[i][RESPOKANEBGON].style.display = "block";
					RESPOKANETOOLCLASSES[i][RESPOKANEBGOFF].style.display = "none";
				}
				else
				{
					RESPOKANETOOLCLASSES[i][RESPOKANEBGON].style.display = "none";
					RESPOKANETOOLCLASSES[i][RESPOKANEBGOFF].style.display = "block";							
				}
			}
		}
	}
	
	function ResetTools()
	{
		//set map items
		//GOOGMAP_ELEM.style.cursor = "default";
		GOOGLEMAPO.getDragObject().setDraggableCursor("crosshair");
		/*this.EnableG();
		//then reset tools
		this.RESPOKANEZoomBox.Reset();
		this.RESPOKANEZoomBox.ClickSearchState();*/
	}
	
	//RESPOKANEGoogleMap :: ResetSearch :: reset map to our initial settings
	function ResetSearch()
	{
		//clear map overlays
		//GOOGLEMAPO.clearOverlays();
		//then recenter and zoom map
		GOOGLEMAPO.setCenter(_respokaneMapInitCenter, _respokaneMapInitZoom);
		//this.ResetAllToolsNoReCenter();
	}
    //]]>
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
  <input type="button" value="remove overlay" onclick="removeOverlay()" />
  <div style="position: relative; top: 0px; left: 100px; width: 563px; height: 235px;" id="respokaneContainer">

				<div style="position: absolute; top: 0px; left: 0px; width: 573px; height: auto; z-index: 99999; display: block;" id="respokaneMapNavCon">
					<div style="position: absolute; top: 0px; left: 0px; z-index: 99999;" id="respokaneMapToolDrag">
						<a href="javascript:zToolChangeHandler(RESPOKANETOOLDEFAULT);"><div class="respokaneMapToolDragBGOn" id="respokaneMapToolDragBGOn" style="display: none;"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif"></div><div style="display: block;" class="respokaneMapToolDragBGOff" id="respokaneMapToolDragBGOff"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif"></div>drag mode</a>
					</div>
					<div style="position: absolute; top: 0px; left: 107px; z-index: 99999;" id="respokaneMapToolBox">
						<a href="javascript:zToolChangeHandler(RESPOKANETOOLZOOMBOX); dragMode()"><div style="display: block;" class="respokaneMapToolBoxBGOn" id="respokaneMapToolBoxBGOn"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif"></div><div class="respokaneMapToolBoxBGOff" id="respokaneMapToolBoxBGOff" style="display: none;"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif"></div>select mode</a>
					</div>
					<div style="position: absolute; top: 0px; left: 214px; z-index: 99999;" id="respokaneMapClearLines">
						<div id="respokaneRemoveMapBoxDisabled" style="display: block;"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif"></div>
						<div id="respokaneRemoveMapBox" style="display: none;"><a href="javascript:RemoveMapBox();"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif">clear</a></div>

					</div>
					<div style="position: absolute; top: 0px; left: 321px; z-index: 99999;" id="respokaneMapResetMap">
						<a href="javascript:ResetSearch();"><img style="width: 107px; height: 25px; border: 0px none;" src="space.gif">reset</a>
					</div>
					<div style="position: absolute; top: 1px; left: 428px; z-index: 99999;" id="respokaneMapControlsType">
						<select onchange="ChangeMapType(this);" id="respokaneMapControlsTypeSelect" name="respokaneMapControlsTypeSelect">
							<option selected="" value="0">Map</option>
							<option value="1">Satellite</option>
							<option value="2">Hybrid</option>
						</select>
					</div>
				</div>

				<div style="position: absolute; top: 25px; left: 0px; width: 573px; height: 202px; border: 1px solid rgb(204, 204, 204);" id="respokaneSearchMap">
					<div style="background:blue;width: 573px; height: 202px; display: block; position:absolute; cursor: crosshair;" id="respokaneGoogleMapOverlay">cCZ</div>
					<div style="width: 573px; height: 202px; background-color: rgb(229, 227, 223); cursor: crosshair; position:absolute" class="respokaneGoogleMapStyle" id="respokaneGoogleMap"></div>
					<div class="respokaneSearchBox" id="respokaneZoomBox" style="display: block; cursor: default; left:0; top:0; width: 0; height: 0; position:absolute"></div>
					
				</div>
</div>
<script>
var RESPOKANETOOLCLASSES = new Array();
	RESPOKANETOOLCLASSES[RESPOKANETOOLDEFAULT] = new Array();
	RESPOKANETOOLCLASSES[RESPOKANETOOLDEFAULT][0] = RESPOKANEDEFAULTTOOL_ELEM;
	RESPOKANETOOLCLASSES[RESPOKANETOOLDEFAULT][RESPOKANEBGON] = document.getElementById(RESPOKANEDEFAULTTOOL_ELEM + "BGOn");
	RESPOKANETOOLCLASSES[RESPOKANETOOLDEFAULT][RESPOKANEBGOFF] = document.getElementById(RESPOKANEDEFAULTTOOL_ELEM + "BGOff");
	RESPOKANETOOLCLASSES[RESPOKANETOOLZOOMBOX] = new Array();
	RESPOKANETOOLCLASSES[RESPOKANETOOLZOOMBOX][0] = RESPOKANEZOOMTOOL_ELEM;
	RESPOKANETOOLCLASSES[RESPOKANETOOLZOOMBOX][RESPOKANEBGON] = document.getElementById(RESPOKANEZOOMTOOL_ELEM + "BGOn");
	RESPOKANETOOLCLASSES[RESPOKANETOOLZOOMBOX][RESPOKANEBGOFF] = document.getElementById(RESPOKANEZOOMTOOL_ELEM + "BGOff");
	//RESPOKANEMapOverlay = document.getElementById("respokaneGoogleMapOverlay");

	var ZoomBox = document.getElementById("respokaneZoomBox");
	var GOOGMAP_ELEM = document.getElementById("respokaneGoogleMap");
	var MAP_WRAP = document.getElementById("respokaneSearchMap");
</script>
<textarea id="message" style="width:700px; height:400px"></textarea>
<div id="testDragDiv" style="background:red; width:700px; height:100px">aaaaaa</div>
<input type="button" value="addEvent" onclick="addEventTest()"/>
<input type="button" value="removeEvent" onclick="removeEventTest()"/>

<script>
var 	RESPOKANEMapOverlay = document.getElementById("respokaneGoogleMapOverlay");
	function addEventTest(){
		document.getElementById("respokaneGoogleMapOverlay").addEventListener('mousedown', mouseDownHandlerTest, true);
		
		document.getElementById("respokaneGoogleMapOverlay").addEventListener('mouseup', removeEventTest, true);
	}
	function mouseDownHandlerTest(){
		document.getElementById("respokaneGoogleMapOverlay").addEventListener('mousemove', addEventHandlerTest, true);
	}
	function addEventHandlerTest(){
		document.getElementById("message").value += "x";
	}
	function removeEventTest(){
		document.getElementById("respokaneGoogleMapOverlay").removeEventListener('mousemove', addEventHandlerTest, true);
		document.getElementById("message").value += "v";
	}

</script>
  </body>
</html>
